<template>
  <el-dialog
    v-model="showRejectModal"
    width="622px"
    append-to-body
    :close-on-click-modal="false"
    custom-class="dialog_center"
  >
    <p class="text-color-000000 text-base mb-4">驳回原因</p>
    <div class="reject_reason">
      <el-checkbox-group v-model="checkList" @change="changeReject">
        <el-checkbox :label="item.name" v-for="item in rejectList" :key="item.id"></el-checkbox>
      </el-checkbox-group>
      <div v-if="checkList[0] === '其他原因'">
        <el-input type="textarea" :rows="3" v-model="otherReason"></el-input>
      </div>
    </div>
    <div class="dialog_common_btn flex justify-center">
      <el-button @click="showRejectModal = false">取消</el-button>
      <el-button type="primary" @click="handleReject">确认</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { rejectStadium } from '@/api/stadium/stadium'
import { approvalSiteByStadiumId } from '@/api/site/site'

interface Props {
  stadiumId?: number | null
  pageType?: string
  rejectList: any[]
}

const props = withDefaults(defineProps<Props>(), {
  stadiumId: null,
  pageType: '',
  rejectList: () => [],
})

const emit = defineEmits([])

const store = useStore()
const router = useRouter()

const showRejectModal = ref(false)
const otherReason = ref('')
const checkList = defineModel<any[]>('checkList', { default: [] })

// 驳回审批
const handleReject = async () => {
  let rejectReason = ''
  if (checkList.value.length == 0) {
    ElMessage.error('请选择驳回原因')
    return
  }
  if (checkList.value[0] == '其他原因') {
    rejectReason = otherReason.value == '' ? '其他原因' : otherReason.value
  } else {
    rejectReason = checkList.value.join(',')
  }

  try {
    if (props.pageType == 'stadium') {
      const params = {
        id: props.stadiumId,
        remark: rejectReason,
      }
      await rejectStadium(params)
    } else {
      const params = {
        stadiumId: props.stadiumId,
        approvalStatus: 2,
        approvalUserId: store.state.user.id,
        approvalUserName: store.state.user.name,
        rejectReason,
      }
      await approvalSiteByStadiumId(params)
    }
    // Assuming $modal.msgSuccess is replaced with a custom message or ElMessage.success
    ElMessage.success('操作成功')
    router.go(-1)
  } catch (error) {
    console.error(error)
  }
}

// 选择驳回原因
const changeReject = () => {
  if (checkList.value.length > 1) {
    checkList.value.splice(0, 1)
  }
}

defineExpose({
  showRejectModal,
})
</script>

<style lang="scss" scoped>
:deep(.dialog_center) {
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 16px 17px;
  }
  .reject_reason {
    padding-left: 27px;
    margin-bottom: 22px;
    .el-checkbox {
      width: 250px;
      margin-bottom: 18px;
      .el-checkbox__inner {
        width: 18px;
        height: 18px;
        border-radius: 0;
        border-color: #a6a6a6;
        &::after {
          width: 6px;
          top: 2px;
          left: 4px;
        }
      }
      .el-checkbox__label {
        color: #383838;
        padding-left: 14px;
      }
      &.is-checked {
        .el-checkbox__inner {
          border-color: #0988fb;
          background-color: #0988fb;
        }
      }
    }
    .el-textarea__inner {
      resize: none;
    }
  }
}
</style>
